<!-- 详情 -->
<template>
  <div class="vue-box submit-box--dialog" style="width: 1000px">
    <!-- ------- 内容部分 ------- -->
    <div class="c-card">
      <el-form class="form-box" label-width="12em" label-position="top">
        <show-info
          :name="item.label"
          v-for="(item, index) in formCfg"
          :type="item.type"
          :dictName="item.dictName"
          :value="state.model[item.prop]"
        ></show-info>
      </el-form>
    </div>
    <div class="c-card">
      <el-tabs v-model="tabActive" type="card" class="margin-top">
        <el-tab-pane label="职业资格证" name="first">
          <div class="pic-box">
            <el-image
              style="width: 100px; height: 100px"
              :src="state.model.accessoryUrl"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[state.model.accessoryUrl]"
              :initial-index="0"
              fit="cover"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup name="sys-user-info">
import { onMounted, reactive, ref } from 'vue'

// 获取插值
const prop = defineProps({
  param: { type: Object },
})

// ------------------ 数据 ------------------
const state = reactive({
  id: prop.param.id || 0, // 获取传值id （0=添加，非0=修改）
  model: {}, // 数据 Model
})
const tabActive = ref('first')
const formCfg = ref([
  {
    label: '所属定点医药',
    prop: 'fixmedins_code',
  },
  {
    label: '药师姓名',
    prop: 'dr_name',
  },
  {
    label: '药师编号',
    prop: 'dr_code',
  },
  {
    label: '性别',
    prop: '',
    type: 'dict',
    dictName: 'sex',
  },
  {
    label: '联系电话',
    prop: 'dr_phone',
  },
])

// 组件加载时触发
onMounted(() => {
  f5()
})

// ------------------ 函数 ------------------
// 查询
const f5 = function () {
  const params = {
    doctorId: state.id,
  }
  sa.ajax('/api/webPresAdmin/doctorDetail', params, function (res) {
    if (!res.data) {
      return sa.alert('数据不存在')
    }
    state.model = res.data
  })
}
</script>

<style scoped lang="scss">
@use '@/sa-frame/sa.scss' as *;
.form-box {
  display: flex;
  flex-wrap: wrap;
  .c-item {
    flex: 0 0 33.3%;
    margin-bottom: 20px;
  }
}
.c-item {
  margin-bottom: 15px;
}
.pic-tab {
  .item {
    background: #f2f3f5;
    padding: 5px 20px;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
    &:hover {
      color: $primary;
    }
  }
}
.pic-box {
  min-height: 280px;
}
</style>
